<template>
	<div class="news-detail">
		<h1 style="margin-bottom: 40rpx;">{{ title }}</h1>
		<div v-for="(item, index) in newsItems" :key="index">
			<p v-if="item.type === 'text'">{{ item.content }}</p>
			<img v-else-if="item.type === 'img'" :src="item.imageUrl" alt="新闻图片" />
			<div v-else-if="item.type === 'video'" class="video-container">
				<video controls>
					<source :src="item.videoUrl[0]" type="video/mp4" />
					您的浏览器不支持 video 标签。
				</video>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				newsItems: []
			};
		},
		onLoad(options) {
			// 从URL参数中获取newsId和title
			this.title = decodeURIComponent(options.title);
			this.fetchNewsDetail(options.newsId);
		},
		methods: {
			fetchNewsDetail(newsId) {
				uni.request({
					url: `https://www.mxnzp.com/api/news/details/v2?newsId=${newsId}&app_id=ktowtrpujjskwqsy&app_secret=EWZo0EePEMjKSFmfAdC2P3cyF24drINp`,
					method: 'GET'
				}).then(response => {
					console.log(response.data.data.items);
					this.newsItems = response.data.data.items;
				}).catch(error => {
					console.error('获取新闻详情失败:', error);
				});
			}
		}
	};
</script>

<style scoped>
	.news-detail {
		padding: 20px;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	.video-container {
		margin: 20px 0;
	}

	video {
		width: 100%;
		height: auto;
	}
</style>